<template>
    <!-- 弹窗 -->
 <el-dialog v-model="dialogVisible" title="添加商品" width="60%" >
     <el-form :model="good">
         <el-form-item label="商品名称" :label-width="formLabelWidth" required>
             <el-input v-model="good.goods_name" autocomplete="off" />
         </el-form-item>
         <el-form-item label="商品价格" :label-width="formLabelWidth" required>
             <el-input v-model="good.goods_price" autocomplete="off" />
         </el-form-item>
         <el-form-item label="商品重量" :label-width="formLabelWidth" required>
             <el-input v-model="good.goods_weight" autocomplete="off" />
         </el-form-item>
         <el-form-item label="创建时间" :label-width="formLabelWidth" required>
             <el-input v-model="good.add_time" autocomplete="off" />
         </el-form-item>
     </el-form>

     <template #footer>
         <span class="dialog-footer">
             <el-button @click="dialogVisible = false">取消</el-button>
             <el-button type="primary" @click="getConfirm">确定</el-button>
         </span>
     </template>

 </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
// 控制弹出窗显示
const dialogVisible = ref(false)
const formLabelWidth = '110px'

const good = reactive({
    goods_name : "",
    goods_price:"",
    goods_weight:"",
    add_time:""
})

const emit = defineEmits(["getAddConfirm"])

// 打开弹窗
const addDialog = ()=>{
 dialogVisible.value = true
}

// 将子组件方法暴露出去
defineExpose({
 addDialog
});

// 添加确认
const getConfirm = ()=>{
 dialogVisible.value = false
 emit("getAddConfirm",good)
 // 确认后重置
 good.goods_name=""
 good.goods_price=""
 good.goods_weight=""
 good.add_time=""
}
</script>